<template>
    <div>
        <div style="width:400px;height:330px;margin-top:10px" id="halfChart"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import _ from "lodash"
export default {
  data() {
    return {
      halfChart: null
    };
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value(res) {
      this.initHalfChart(res);
    }
  },
  methods: {
    // 初始化热点C	hart
    initHalfChart(resData) {
      var allData = [];
      var allColor = [
        "#28E787",
        "#00D1FF",
        "#8693F3",
        "#F0BD25",
        "#E81E79",
        "#28E787",
        "#00D1FF",
        "#8693F3",
        "#28E787",
        "#00D1FF",
        "#8693F3",
        "#F0BD25",
        "#E81E79",
        "#28E787",
        "#00D1FF",
        "#8693F3"
      ];
      var placeHolderStyle = {
        normal: {
          color: "rgba(0,0,0,0)",
          label: {
            show: false
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: "rgba(0,0,0,0)"
            }
          }
        },
        emphasis: {
          color: "rgba(0,0,0,0)"
        }
      };
      var maxArr = []
      var max = 0
      var rich = {
        a: {
          align: "center",
          fontFamily: "DIN Condensed Bold",
          fontSize: 18,
          fontWeight: "bold"
        },
        b: {
          align: "center",
          fontFamily: "DIN Condensed Bold",
          fontSize: 18,
          lineHeight: 30,
          fontWeight: "bold"
        }
      };
      var center = ["35%", "33%"];
      resData.forEach(itemV => {
        maxArr.push(Number(itemV.value))
      })
      max = _.max(maxArr)
      resData.forEach((item, id) => {
        var obj = {
          name: "Line" + id,
          type: "pie",
          startAngle: 0,
          clockWise: true,
          hoverAnimation: false,
          radius: [String(-30 + 13 * (resData.length - id)) + "%", String(-20 + 13 * (resData.length - id)) + "%"],
          center: center,
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: "\n{a|{b}}{b|{c}}",
                rich: rich
              },
              labelLine: {
                length: 30 + 14 * id,
                length2: 5 * id
              }
            }
          },
          data: [
            {
              value: item.value,
              name: item.name,
              itemStyle: {
                normal: {
                  labelLine: {
                    show: true,
                    lineStyle: {
                      color: allColor[id]
                    }
                  }
                }
              }
            },
            {
              value: max,
              name: "invisible",
              itemStyle: placeHolderStyle
            }
          ]
        };
        allData.push(obj);
      });
      var Option = {
        backgroundColor: "transparent",
        color: allColor,
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false
        },
        series: allData
      };
      var self = this;
      if (this.hotChart) {
        this.halfChart.clear();
        this.halfChart.dispose();
      }
      setTimeout(function() {
        self.halfChart = echarts.init(document.getElementById("halfChart"));
        self.halfChart.setOption(Option);
      }, 10);
    }
  }
};
</script>

<style scoped>
</style>